<template>
  <el-drawer
    :visible.sync="$attrs.visable"
    size="380px"
    title="转接对话"
    :before-close="handleClose"
  >
    <div class="h_full">
      <div class="boxcontainer">
        <el-form ref="form" :model="queryParams" size="small" class="p-16 ">
          <el-form-item label="" class="mb-10">
            <el-input v-model="queryParams.name" placeholder="请输入关键词" class="primary_input_append">
              <el-button slot="append" type="primary">搜 索</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="">
            <TreeSelect
              v-model="queryParams.group"
              :props="props"
              :options="optionData"
              placeholder="筛选分组"
              @getValue="getValue($event)"
              :style="{width:'100%'}"
            />
            <!-- <el-select
              v-model="queryParams.region"
              placeholder="筛选分组"
              style="width: 100%"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select> -->
          </el-form-item>
        </el-form>
        <div class="boxbody">
          <div v-if="!grouplist.length" class="flexcolumn aligncenter">
            <img src="@/assets/images/empty.png" alt="" class="emptyimg" />
            <div class="mt-16">暂无可转接的人</div>
          </div>
          <el-collapse v-else accordion v-model="activeName" class="transcollapse">
            <el-collapse-item name="1">
              <template slot="title">
               <div class="collapsetitle w_full f-14 flexbetween pr-12">
                <div>全部</div>
                <el-dropdown @command="handleCommand">
                  <span>
                    <svg-icon icon-class='ifilter' class-name='f-14 c_888999' />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a">全选</el-dropdown-item>
                    <el-dropdown-item command="b">取消选中</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <!-- <svg-icon icon-class='ifilter' class-name='f-14 c_888999' /> -->
               </div>
              </template>
              <div class="listbody p-16 pt-4">
                <div v-for="item in grouplist" :key="item.id" class="flex aligncenter listitem">
                  <div class="userbody p_relative flex p-5" :class="{active:item.checked}" @click="handlecheck(item)">
                    <div class="p_relative">
                      <img src="//s.yezgea02.com/static/1561701524131/kefu_logo.png" class="mr-10 u_avatar" alt="">
                      <i class="el-icon-success iconstatus f-14 c_39da49"></i>
                    </div>
                    <div class="userinfo">
                      <div class="f-16 textover mb-5">员工2(分组二)</div>
                      <div class="textover c_888999">19911383351@222</div>
                    </div>
                    <i v-if="item.checked" class="el-icon-check f-14 selecticon"></i>
                  </div>
                  <div class="c_fa966d f-14">
                    当前接待对话：0
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="boxfooter">
        <el-button size="small" type="primary" @click="handleTransfer">转 接</el-button>
        <el-button size="small" @click="handleClose">取 消</el-button>
      </div>
    </div>
    <!-- <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="danger" @click="handleSubmit"
        >确 定</el-button
      >
    </span> -->
  </el-drawer>
</template>

<script>
import TreeSelect from "@/components/TreeSelect";
export default {
  data() {
    return {
      queryParams: {
        name: "",
        group:1
      },
      grouplist: [
        { id: 1, name: "测试群", checked: false },
        { id: 2, name: "测试群", checked: true },
      ],
      props: {
        // 配置项（必选）
        value: "id",
        label: "label",
        children: "children"
        // disabled:true
      },
      activeName:'1',
      optionData: [
        {   
          id:1,
          label: "一级 1",
          children: [
            {
              id:2,
              label: "二级 1-1",
              children: [
                {
                  id:3,
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          id:4,
          label: "一级 2",
          children: [
            {
              id:5,
              label: "二级 2-1",
              children: [
                {
                  id:6,
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              id:7,
              label: "二级 2-2",
              children: [
                {
                  id:8,
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          id:9,  
          label: "一级 3",
          children: [
            {
              id:10,  
              label: "二级 3-1",
              children: [
                {
                  id:11,  
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              id:12,
              label: "二级 3-2",
              children: [
                {
                  id:13,
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  props: {},
  components: {
    TreeSelect,
  },
  created() {},
  methods: {
    handleClose() {
      //   this.$emit("close"); //关闭弹窗;
      this.$emit("update:visable", false);
    },

    handleQuery() {},

    handlecheck(item) {
      item.checked = !item.checked
      // console.log("item");
      // this.grouplist.forEach((i) => {
      //   if (i.id == item.id) {
      //     i.checked = true;
      //   }
      // });
      // console.log("this.grouplist:", this.grouplist);
    },

    handleCommand(type){
      switch (type) {
        case 'a':
          // 全选
          this.handleSelectAll()
          break;
        case 'b':
          // 取消选中
          this.handleUnSelectAll()
          break;
        default:
          break;
      }
    },

    // 全选
    handleSelectAll(){
      this.grouplist.forEach((item)=>{
        item.checked = true
      })
    },
    // 全不选
    handleUnSelectAll(){
      this.grouplist.forEach((item)=>{
        item.checked = false
      })
    },

    getValue(value) {
    //   this.valueId = value;
      console.log('-----:',value);
    },

    handleTransfer(){
      let arr = this.grouplist.filter(item=>item.checked)
      if(!arr.length){
        this.$message.warning('请选择要转接的客服子账号')
        return
      }
      // if(!this.selectArr.length) return
    },
  },
};
</script>
<style lang="scss" scoped>
.boxcontainer {
  height: calc(100% - 54px);
  overflow: auto;
}
.boxbody {
  // height: calc(100% - 125px);
}
.emptyimg {
  height: 120px;
}
.boxfooter {
  padding: 10px 16px;
  border-top: 1px solid #e9e9e9;
}
.transcollapse{
  border: 0;
  ::v-deep .el-collapse-item__header{
    background-color: #f5f5f5;
    border: 0;
    position: relative;
    padding-left: 35px;

    .el-collapse-item__arrow{
      position: absolute;
      left: 12px;
      font-weight: 600;
      font-size: 14px;
    }
  }
  ::v-deep .el-collapse-item__wrap{
    border-bottom: 0;
  }
}
.listitem{
  .userbody{
    &:hover{
      background-color: rgba(35,116,240,.05);
    }
    &.active{
      background-color: rgba(35,116,240,.05);
    }
  }
  .userinfo{
    width: 170px;
    line-height: 18px;
  }
  .u_avatar{
    width: 36px;
    height: 36px;
  }
  .iconstatus{
    position: absolute;
    bottom: 0;
    left: 25px;
  }
  .selecticon{
    position: absolute;
    right: 10px;
    top: 15px;
    color: #2374f0;
    font-size: 16px;
  }
}
</style>